<template>
    <el-container :style="{ height: '100%' }">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="20">
                        <el-menu mode="horizontal" router :default-active="$route.path">
                            <el-menu-item index="/dashboard"> 答题大数据 </el-menu-item>
                            <el-submenu index="answer">
                                <span slot="title">答题</span>
                                <el-menu-item index="/choice-paper"> 考试 </el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                    <el-col :span="4" style="padding: 15px 0px;">
                        <el-dropdown>
                            <el-avatar size="small" class="right">{{userInfo.userName[0]}}</el-avatar>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <router-link to="/wrong-book"
                                        >错题本</router-link
                                    >
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <router-link to="/exam-history"
                                        >考试记录</router-link
                                    >
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <router-link to="/logout"
                                        >退出登录</router-link
                                    >
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-col :md="{span: 16, offset: 4}">
                    <router-view></router-view>
                </el-col>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import { get_user_info } from "@/api/user"

export default {
    name: "layout",
    data() {
        return {
            userInfo: {
                userName:''
            }
        }
    },
    methods: {},
    // beforeRouteUpdate (to, from, next) {
    //     this.breadcrumb = this.$route.matched.map(item => {
    //         return item.meta.title
    //     })
    // },
    mounted() {
        get_user_info().then((res)=> {
            if(res.code == 200){
                this.userInfo = res.data
            }else if(res.code == 500){
                this.$router.push("/login")
            }
        })
    },
};
</script>
<style lang="scss">
$navBackgroudColor: #001529;
.title {
    color: #fff;
}
a {
    text-decoration: none;
    color: #666;
}
a:hover {
    color: #666;
}
header {
    box-shadow: 0px 1px 10px #aaa;
    z-index: 2;
}
.el-menu--horizontal{
    border-bottom: none!important;
}
</style>